Navigation API:n hallinta: Yksisivuisten sovellusten reititys ja historianhallinta

Navigation API edustaa merkittävää edistysaskelta siinä, miten käsittelemme reititystä ja historianhallintaa yksisivuisissa sovelluksissa (Single Page Applications, SPA). Perinteiset menetelmät perustuvat usein `window.location`-objektin manipulointiin tai kolmannen osapuolen kirjastojen käyttöön. Vaikka nämä lähestymistavat ovat palvelleet meitä hyvin, Navigation API tarjoaa virtaviivaisemman, suorituskykyisemmän ja monipuolisemman ratkaisun, joka antaa kehittäjille paremman hallinnan käyttäjän navigointikokemuksesta.

Mikä on Navigation API?

Navigation API on nykyaikainen selainrajapinta, joka on suunniteltu yksinkertaistamaan ja parantamaan tapaa, jolla yksisivuiset sovellukset hallitsevat navigointia, reititystä ja historiaa. Se esittelee uuden `navigation`-objektin, joka tarjoaa metodeja ja tapahtumia, joiden avulla kehittäjät voivat siepata ja hallita navigointitapahtumia, päivittää URL-osoitetta ja ylläpitää yhtenäistä selaushistoriaa ilman koko sivun uudelleenlatauksia. Tämä johtaa nopeampaan, sujuvampaan ja reagoivampaan käyttäjäkokemukseen.

Navigation API:n käytön edut

• Parempi suorituskyky: Poistamalla koko sivun uudelleenlataukset Navigation API parantaa merkittävästi yksisivuisten sovellusten suorituskykyä. Siirtymät eri näkymien välillä nopeutuvat ja sulavoituvat, mikä johtaa mukaansatempaavampaan käyttäjäkokemukseen.
• Tehostettu hallinta: API tarjoaa tarkan hallinnan navigointitapahtumiin, mikä antaa kehittäjille mahdollisuuden siepata ja muokata navigointikäyttäytymistä tarpeen mukaan. Tämä sisältää navigoinnin estämisen, käyttäjien uudelleenohjaamisen ja mukautetun logiikan suorittamisen ennen navigointia tai sen jälkeen.
• Yksinkertaistettu historianhallinta: Selaimen historiapinon hallinta on helpompaa Navigation API:n avulla. Kehittäjät voivat ohjelmallisesti lisätä, korvata ja selata historiamerkintöjä, mikä varmistaa johdonmukaisen ja ennustettavan selauskokemuksen.
• Deklaratiivinen navigointi: Navigation API kannustaa deklaratiivisempaan lähestymistapaan reitityksessä, mikä antaa kehittäjille mahdollisuuden määritellä navigointisääntöjä ja -käyttäytymistä selkeällä ja ytimekkäällä tavalla. Tämä parantaa koodin luettavuutta ja ylläpidettävyyttä.
• Integraatio nykyaikaisiin kehyksiin: Navigation API on suunniteltu integroitumaan saumattomasti nykyaikaisiin JavaScript-kehyksiin ja -kirjastoihin, kuten React, Angular ja Vue.js. Tämä antaa kehittäjille mahdollisuuden hyödyntää API:n ominaisuuksia olemassa olevissa kehitystyönkulkuissaan.

Ydinkäsitteet ja ominaisuudet

1. `navigation`-objekti

Navigation API:n ydin on `navigation`-objekti, joka on saatavilla globaalin `window`-objektin kautta (eli `window.navigation`). Tämä objekti tarjoaa pääsyn erilaisiin navigointiin liittyviin ominaisuuksiin ja metodeihin, mukaan lukien:

• `currentEntry`: Palauttaa `NavigationHistoryEntry`-objektin, joka edustaa nykyistä merkintää navigointihistoriassa.
• `entries()`: Palauttaa taulukon `NavigationHistoryEntry`-objekteista, jotka edustavat kaikkia navigointihistorian merkintöjä.
• `navigate(url, { state, info, replace })`: Siirtyy uuteen URL-osoitteeseen.
• `back()`: Siirtyy takaisin edelliseen historiamerkintään.
• `forward()`: Siirtyy eteenpäin seuraavaan historiamerkintään.
• `reload()`: Lataa nykyisen sivun uudelleen.
• `addEventListener(event, listener)`: Lisää tapahtumankuuntelijan navigointiin liittyville tapahtumille.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry`-rajapinta edustaa yhtä merkintää navigointihistoriassa. Se tarjoaa tietoa merkinnästä, kuten sen URL-osoitteen, tilan ja yksilöllisen tunnisteen.

• `url`: Historiakohteen URL-osoite.
• `key`: Ainutlaatuinen tunniste historiakohteelle.
• `id`: Toinen ainutlaatuinen tunniste, joka on erityisen hyödyllinen navigointitapahtuman elinkaaren seuraamisessa.
• `sameDocument`: Boolean-arvo, joka ilmaisee, johtaako navigointi saman dokumentin sisäiseen siirtymään.
• `getState()`: Palauttaa historiakohteeseen liittyvän tilan (asetettu navigoinnin aikana).

3. Navigointitapahtumat

Navigation API lähettää useita tapahtumia, joiden avulla kehittäjät voivat valvoa ja hallita navigointikäyttäytymistä. Näitä tapahtumia ovat:

• `navigate`: Lähetetään, kun navigointi aloitetaan (esim. linkin napsauttaminen, lomakkeen lähettäminen tai `navigation.navigate()`-kutsu). Tämä on ensisijainen tapahtuma navigointipyyntöjen sieppaamiseen ja käsittelyyn.
• `navigatesuccess`: Lähetetään, kun navigointi onnistuu.
• `navigateerror`: Lähetetään, kun navigointi epäonnistuu (esim. verkkovirheen tai käsittelemättömän poikkeuksen vuoksi).
• `currentchange`: Lähetetään, kun nykyinen historiamerkintä muuttuu (esim. siirryttäessä eteen- tai taaksepäin).
• `dispose`: Lähetetään, kun `NavigationHistoryEntry` ei ole enää saavutettavissa, esimerkiksi kun se poistetaan historiasta `replaceState`-toiminnon aikana.

Reitityksen toteuttaminen Navigation API:lla: Käytännön esimerkki

Kuvitellaan, miten Navigation API:ta käytetään perusreitityksen toteuttamiseen yksinkertaisessa yksisivuisessa sovelluksessa. Oletetaan, että sovelluksessa on kolme näkymää: Koti, Tietoja ja Yhteystiedot.

Luo ensin funktio reittimuutosten käsittelyyn:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Koti
Tervetuloa Kotisivulle!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
Tietoja
Lue lisää meistä.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Yhteystiedot
Ota meihin yhteyttä.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Ei löytynyt
Sivua ei löytynyt.
';
  }
}

Lisää seuraavaksi tapahtumankuuntelija `navigate`-tapahtumalle:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Estä selaimen oletusnavigointi

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Suorita lupaus reitinkäsittelyn jälkeen
  });

  event.transition = promise;
});

Tämä koodi sieppaa `navigate`-tapahtuman, poimii URL-osoitteen `event.destination`-objektista, estää selaimen oletusnavigoinnin, kutsuu `handleRouteChange`-funktiota sisällön päivittämiseksi ja asettaa `event.transition`-lupauksen. `event.transition`-asetus varmistaa, että selain odottaa sisällön päivityksen valmistumista ennen sivun visuaalista päivittämistä.

Lopuksi voit luoda linkkejä, jotka käynnistävät navigoinnin:

Koti | Tietoja | Yhteystiedot

Ja liitä napsautuskuuntelija näihin linkkeihin:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Tämä määrittää perusasiakaspuolen reitityksen käyttämällä Navigation API:ta. Nyt linkkien napsauttaminen käynnistää navigointitapahtuman, joka päivittää `content`-divin sisällön ilman koko sivun uudelleenlatausta.

Tilan hallinnan lisääminen

Navigation API mahdollistaa myös tilan liittämisen jokaiseen historiamerkintään. Tämä on hyödyllistä datan säilyttämisessä navigointitapahtumien välillä. Muokataan edellistä esimerkkiä siten, että se sisältää tilaobjektin.

Kun kutsut `navigation.navigate()`-funktiota, voit antaa sille `state`-objektin:

window.navigation.navigate('/about', { state: { pageTitle: 'Tietoa meistä' } });

`navigate`-tapahtumankuuntelijan sisällä voit käyttää tilaa `event.destination.getState()`-metodilla:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Oma Sovellus'; // Oletusotsikko

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Koti
Tervetuloa Kotisivulle!
';
      title = 'Koti';
      break;
    case '/about':
      contentDiv.innerHTML = '
Tietoja
Lue lisää meistä.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Yhteystiedot
Ota meihin yhteyttä.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Ei löytynyt
Sivua ei löytynyt.
';
      title = '404 Ei löytynyt';
  }
  document.title = title;
}

Tässä muokatussa esimerkissä `handleRouteChange`-funktio hyväksyy nyt `state`-parametrin ja käyttää sitä dokumentin otsikon päivittämiseen. Jos tilaa ei anneta, oletusarvona on 'Oma Sovellus'.

`navigation.updateCurrentEntry()`-metodin käyttö

Joskus saatat haluta päivittää nykyisen historiamerkinnän tilan ilman uuden navigoinnin käynnistämistä. `navigation.updateCurrentEntry()`-metodi mahdollistaa tämän. Esimerkiksi, jos käyttäjä muuttaa asetusta nykyisellä sivulla, voit päivittää tilan vastaamaan tätä muutosta:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Päivitettiin asetus:', setting, 'arvoon', value);
}

// Esimerkkikäyttö:
updateUserSetting('theme', 'dark');

Tämä funktio hakee nykyisen tilan, yhdistää siihen päivitetyn asetuksen ja päivittää sitten nykyisen historiamerkinnän uudella tilalla.

Edistyneet käyttötapaukset ja huomiot

1. Lomakkeiden lähetysten käsittely

Navigation API:ta voidaan käyttää lomakkeiden lähetysten käsittelyyn yksisivuisissa sovelluksissa, mikä estää koko sivun uudelleenlataukset ja tarjoaa saumattomamman käyttäjäkokemuksen. Voit siepata lomakkeen lähetystapahtuman ja käyttää `navigation.navigate()`-funktiota URL-osoitteen päivittämiseen ja tulosten näyttämiseen ilman koko sivun uudelleenlatausta.

2. Asynkroniset operaatiot

Navigointitapahtumia käsiteltäessä saatat joutua suorittamaan asynkronisia operaatioita, kuten datan hakemista API:sta. `event.transition`-ominaisuuden avulla voit liittää lupauksen navigointitapahtumaan, mikä varmistaa, että selain odottaa asynkronisen operaation valmistumista ennen sivun päivittämistä. Katso yllä olevat esimerkit.

3. Vieritysposition palautus

Vieritysposition ylläpitäminen navigoinnin aikana on ratkaisevan tärkeää hyvän käyttäjäkokemuksen tarjoamiseksi. Navigation API tarjoaa mekanismeja vieritysposition palauttamiseksi, kun historiassa siirrytään taakse- tai eteenpäin. Voit käyttää `NavigationHistoryEntry`-objektin `scroll`-ominaisuutta vieritysposition tallentamiseen ja palauttamiseen.

4. Virheidenkäsittely

On olennaista käsitellä virheitä, jotka voivat ilmetä navigoinnin aikana, kuten verkkovirheitä tai käsittelemättömiä poikkeuksia. `navigateerror`-tapahtuman avulla voit siepata ja käsitellä nämä virheet sulavasti, mikä estää sovelluksen kaatumisen tai virheilmoituksen näyttämisen käyttäjälle.

5. Progressiivinen parantaminen

Kun rakennetaan yksisivuisia sovelluksia Navigation API:lla, on tärkeää ottaa huomioon progressiivinen parantaminen (progressive enhancement). Varmista, että sovelluksesi toimii oikein, vaikka selain ei tukisikaan Navigation API:ta. Voit käyttää ominaisuuksien tunnistusta (`feature detection`) tarkistaaksesi `navigation`-objektin olemassaolon ja turvautua tarvittaessa perinteisiin reititysmenetelmiin.

Vertailu perinteisiin reititysmenetelmiin

Perinteiset reititysmenetelmät yksisivuisissa sovelluksissa perustuvat usein `window.location`-objektin manipulointiin tai kolmannen osapuolen kirjastojen, kuten `react-router` tai `vue-router`, käyttöön. Vaikka nämä menetelmät ovat laajalti käytettyjä ja vakiintuneita, niillä on joitain rajoituksia:

• Koko sivun uudelleenlataukset: `window.location`-objektin suora manipulointi voi käynnistää koko sivun uudelleenlatauksia, mikä voi olla hidasta ja häiritsevää käyttäjäkokemukselle.
• Monimutkaisuus: Historian ja tilan hallinta perinteisillä menetelmillä voi olla monimutkaista ja virhealtista, erityisesti suurissa ja monimutkaisissa sovelluksissa.
• Suorituskykykuorma: Kolmannen osapuolen reitityskirjastot voivat lisätä merkittävää suorituskykykuormaa, varsinkin jos niitä ei ole optimoitu sovelluksesi erityistarpeisiin.

Navigation API vastaa näihin rajoituksiin tarjoamalla virtaviivaisemman, suorituskykyisemmän ja monipuolisemman ratkaisun reititykseen ja historianhallintaan. Se poistaa koko sivun uudelleenlataukset, yksinkertaistaa historianhallintaa ja tarjoaa tarkan hallinnan navigointitapahtumiin.

Selainyhteensopivuus

Vuoden 2024 loppupuolella Navigation API:lla on hyvä tuki nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge. On kuitenkin aina hyvä käytäntö tarkistaa viimeisimmät selainyhteensopivuustiedot resursseista, kuten Can I use, ennen kuin otat Navigation API:n käyttöön tuotantosovelluksissasi. Jos vanhempien selainten tuki on välttämätöntä, harkitse polyfillin tai varamekanismin käyttöä.

Johtopäätös

Navigation API on tehokas työkalu nykyaikaisten, suorituskykyisten yksisivuisten sovellusten rakentamiseen edistyneillä reititys- ja historianhallintaominaisuuksilla. Hyödyntämällä API:n ominaisuuksia kehittäjät voivat luoda nopeampia, sujuvampia ja mukaansatempaavampia käyttäjäkokemuksia. Vaikka alkuvaiheen oppimiskäyrä saattaa olla hieman jyrkempi verrattuna yksinkertaisempiin, vanhempiin menetelmiin, Navigation API:n edut, erityisesti monimutkaisissa sovelluksissa, tekevät siitä kannattavan investoinnin. Ota Navigation API käyttöösi ja vapauta yksisivuisten sovellustesi koko potentiaali.

Lisätietoa

• MDN Web Docs: Navigation API
• WICG Navigation API Specification